<template>
	<view class="content">
		<view class="">

			<view class="top" :style="{background:topShow?'#fff':'rgba(0,0,0,0)'}">
				<view class="statusBarHeight">
				</view>
				<view class="" style="display: flex;width: 100vw;">
					<view class="icon" @click="navRetreat">
						<u-icon name="arrow-left" :color="topShow?'#000':'#fff'" size="34" style="transition: all .3s;">
						</u-icon>
					</view>
					<view class="text" :style="{color:topShow?'#000':'#fff'}">
						主页
					</view>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" style="height: 100vh;" @scroll="top" @scrolltolower="newData" upper-threshold="200">
			<view class="img_bg">
				<image :src="'/static/bg.png'" mode=""></image>
			</view>
			<view class="personnel">
				<view class="head_img" @click="btnindex">
					<image :src="user.pic||'/static/head_img.jpeg'" mode=""></image>
				</view>
				<view class="text">
					<view class="name">
						{{user.user||'路人'}}
					</view>
					<view class="num">
						<text @click="navRoute(1)">关注({{user.atten_num_a}})</text>
						<text @click="navRoute(2)">粉丝({{user.atten_num_b}})</text>
					</view>
				</view>

				<view v-if="myData.id!=user.id" class="attention" @click="setAttention"
					:style="{background:user.atten_zt==1?'#ccc':''}">
					{{user.atten_zt==1?'已关注':'关注'}}
				</view>
			</view>

			<view class="comment">
				<view class="commentItem" v-for="(item ,index) in list" :key="index">
					<view class="" style="display: flex;">
						<view class="img_head" @click="navRoute('myHomepage',3,item)">
							<!-- <image :src="item.user.pic||'/static/head_img.jpeg'" mode=""></image> -->
							<image v-if="!item.baby[0].user" class="left" :src="item.user.pic||'/static/head_img.jpeg'"
								mode="">
							</image>
							<block v-else>
								<image :src="item.user.pic" alt="" class="left" />
								<image :src="item.baby[0].pic" alt="" class="right" />
							</block>
						</view>
						<view class="text" :style="{width:!item.baby[0].user?'calc(100% - 90rpx)':'77%'}">
							<view class="" style="display: flex;">
								<view class="name">
									<block v-if="!item.baby[0].user"> <span
											class="parent">{{item.user.user||'路人'}}</span>
									</block>
									<block v-else>
										<span class="parent">{{item.user.user}}</span>
										<span class="child">{{item.baby[0].user}}</span>
									</block>
								</view>

								<view class="esc" v-if="myData.id==user.id&&item.user_type!='merchants'"
									@click="esc(item)">
									<u-icon name="trash" size="40" color="#7f7f7f"></u-icon>
								</view>




							</view>

							<view class="time">
								{{item.time}}
							</view>


						</view>

					</view>
					<view class="">
						<view style="margin:5upx 0 10upx 0;">
							<u-read-more show-height="200" :shadowStyle="shadowStyle" close-text="全文" text-indent="0">
								<text class="content_text">{{item.content}}</text>
							</u-read-more>
						</view>

						<view v-if="item.video_pic&&forums_status==1" class="video" @click="play(item.video)"
							style="position: relative;">
							<u-icon name="play-circle-fill" size="100" color="#f1f1f1" class="play"></u-icon>
							<image :src="item.video_pic" mode="aspectFill"></image>
						</view>
						<view class="img" style="margin-bottom: 20upx;">
							<view class="imgItem" v-for="(itemImg ,Xindex) in item.pic_set" :key="Xindex"
								@click="$util.enlargement(item.pic_set,Xindex)">
								<image :src="itemImg" mode="aspectFill"
									:style="{height:!item.baby[0].pic?'200rpx':'175rpx'}"></image>
							</view>

						</view>
					</view>

					<view class="" style="display: flex;flex-wrap: wrap;position: relative;height: 100upx;">
						<view class="like_item" v-for="like_item in item.like_list"
							@click="nav('myHomepage',3,{user_type:like_item.user_list.user_type,user_id:like_item.user_list.id})">
							<image :src="like_item.user_list.pic||'/static/head_img.jpeg'" mode=""></image>
							<view class="">
								{{like_item.user_list.user||'暂无'}}
							</view>
						</view>
						<u-icon name="more-dot-fill" style="margin-top: 50upx;margin-left: 10upx;"
							v-if="item.like_list.length==6" @click="nav('liveList',item.id)"></u-icon>
						<view style="color: #ccc;font-size: 28upx;line-height: 100upx;" v-if="!item.like_list.length">
							快去拉好友来点赞哦~
						</view>
						<view class="fabulous" @tap="like(item,index)">

							<span
								:style="{color: item.like_zt?'rgb(255,97,94)':'rgb(109, 108, 108)'}">{{item.like_num}}</span>
							<u-icon name="thumb-up" style="margin-left: 5upx;"
								:color="item.like_zt?'rgb(255,97,94)':'rgb(109, 108, 108)'" size="40">
							</u-icon>
							<view :animation="animationDataArr[index]" class="praise-me animation-opacity"> +1
							</view>


						</view>
					</view>

				</view>
				<view class="" style="background-color: #fff;">
					<u-empty v-if="!list.length" margin-top="200" text="啥也没有!" mode="list"></u-empty>
				</view>
			</view>
		</scroll-view>
		<u-toast ref="uToast" />

		<view v-if="videoplay">
			<video controls id="myvideo" :src="videoUrl" :direction="0" @fullscreenchange="screenChange"></video>
		</view>
		<Loading />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				forums_status: uni.getStorageSync('basic').forums_status,
				list: [],
				show: false,
				shadowStyle: {
					backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
					paddingTop: "100rpx",
					marginTop: "-100rpx"
				},
				code: 3,
				user_id: '',
				user: {},
				animationData: {},
				animationDataArr: [],
				myData: {},
				page: 1,
				networkCode: true,
				Xindex: 0,
				topShow: false,
				videoplay: false,
				likeCode: false,
				videoUrl: ''
			}
		},
		onLoad(e) {
			console.log(e)
			this.videoContext = uni.createVideoContext("myvideo", this);
			this.code = e.code
			this.item = JSON.parse(e.item)
			if (e.code == 3) {
				this.user_id = this.item.user_id
			}
			this.newData()
			// 1 在页面创建的时候，创建一个临时动画对象
			this.animation = uni.createAnimation();
			this.animationDataArr = Array(this.list.length).fill({});

			this.myData = uni.getStorageSync('myData');


		},

		onUnload() {
			// 5 页面卸载的时候，清除动画数据
			this.animationData = {};
			this.animationDataArr = Array(this.list.length).fill({});
		},
		methods: {
			top(e) {
				if (e.detail.scrollTop < 65) {
					if (!this.topShow) return;
					this.topShow = false;
				} else {
					if (this.topShow) return;
					this.topShow = true
				}
			},
			play(e) {
				this.videoUrl = e;
				this.videoContext.requestFullScreen({
					direction: 90
				}); //direction: 90  这个是控制全屏的时候视屏旋转多少度 
				this.videoContext.play();
				this.videoplay = true;
			},
			screenChange(e) {
				let fullScreen = e.detail.fullScreen; //值true为进入全屏，false为退出全屏
				console.log(e, "qweeee========================================");
				if (!fullScreen) {
					//退出全屏
					this.videoplay = false; // 隐藏播放盒子
				}
			},
			btnindex() {
				if (this.Xindex == 3) return this.Xindex = 0
				this.Xindex++
			},
			newData() {
				if (!this.networkCode) return uni.showToast({
					title: '已经到底了~',
					icon: 'none'
				});
				let data = {
					page: this.page,
					num: 10,
					type: this.code,
					user_type: this.item.user_type || 'merchants'
				}
				if (this.code == 3) data.user_id = this.user_id;


				this.$myRuquest('home/Forums/forums_list', data, 'POST').then(res => {
					if (res.code = 400) {
						if (res.data.length != 10) this.networkCode = false
						this.page++
						this.user = res.user
						res.data.forEach(item => {
							// item.time = this.getLocalTime(item.time)
							item.time = this.$u.timeFrom(item.time);
						})
						this.list.push(...res.data)
					}
				})
			},
			setAttention() {
				this.$myRuquest('home/Forums/forums_atten', {
					user_id: this.user.id,
					user_type: this.item.user_type || 'merchants'
				}, 'POST').then(res => {
					if (res.code == 400) {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'success'
						})
						this.user.atten_zt = this.user.atten_zt == 0 ? 1 : 0
						// this.newData()
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'warning '
						})
					}
				})
			},
			like(item, index) {
				if (this.likeCode) return;
				this.likeCode = true
				this.$myRuquest('home/Forums/forums_like', {
					forums_id: item.id
				}, 'POST').then(res => {

					if (res.code == 400) {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'success'
						})
						let num = -1
						if (this.list[index].like_zt == 1) {
							this.list[index].like_num--
							item.like_list.forEach((items, indexs) => {
								if (items.user_list.id == this.myData.id && items.user_list.user_type ==
									'user') return num = indexs
							})
							if (num != -1) {
								this.list[index].like_list.splice(num, 1)
								if(this.list[index].popLike){
									this.list[index].like_list.push(this.list[index].popLike)
									this.list[index].popLike=""
								}
								this.$forceUpdate();
							}
						} else {
							this.list[index].like_num++
							let data = this.myData
							data.user_type = 'user'
							this.list[index].like_list.unshift({
								user_list: data
							})
							if(this.list[index].like_list.length==7){
								this.list[index].popLike=this.list[index].like_list.pop()
							} 
							this.$forceUpdate();

						}
						this.list[index].like_zt = !this.list[index].like_zt
						this.praiseMe(index, this.list[index].like_zt)
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'success'
						})
					}
					this.likeCode = false
				})
			},
			praiseMe(index, status) {

				this.list[index].status = status
				if (this.list[index].status) {
					// 执行动画
					this.animation.translateY(-30).opacity(1).step({
						duration: 500
					});
					// 通过动画实例的export方法导出动画数据给animation属性
					this.animationData = this.animation;
					this.animationDataArr[index] = this.animationData.export();

					// 还原动画
					setTimeout(() => {
						this.animation.translateY(0).opacity(0).step({
							duration: 0
						});
						this.animationData = this.animation;
						this.animationDataArr[index] = this.animationData.export();
					}, 600)
				}
			},
			esc(item) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '您确定要删除该文章吗?',
					success: function(res) {
						if (res.confirm) {
							that.$myRuquest('home/Forums/forums_del', {
								forums_id: item.id
							}, 'DELETE').then(res => {
								if (res.code == 400) {

									that.page = 1
									that.list = []
									that.networkCode = true
									that.$refs.uToast.show({
										title: '删除成功',
										type: 'success'
									})
									that.newData()
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				// return console.log(item)

			},
			navRetreat() {
				uni.navigateBack({
					delta: 1
				});
			},
			navRoute(type) {
				if (this.code == 3) return;
				uni.navigateTo({
					url: `./personnel?type=${type}`
				});
			},
			nav(path, code, item) {
				uni.navigateTo({
					url: `../${path}/${path}?code=${code}&item=${JSON.stringify(item)}`
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.top {
		position: fixed;
		width: 100%;
		padding-top: 30upx;
		z-index: 99999;
		transition: all .3s;

		.icon {
			// margin-left: 20upx;
			padding: 20upx;

			position: relative;
			bottom: 20upx;
			// z-index: 999;

		}

		.text {
			color: #fff;
			text-align: center;
			margin: auto;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			transition: all .3s;
		}

		>view:nth-child(2) {
			color: #fff;
			text-align: center;
			width: 20upx;
			padding: 20upx;
			// position: absolute;
			// top: 30upx;
			// left: 0;
			// z-index: 0;
		}
	}

	.img_bg {
		width: 100vw;
		height: 300upx;
		position: relative;
		z-index: -9;

		image {
			width: 100%;
			height: 100%;
			background-image: none;
		}
	}

	.twoCode {
		width: 100vw;
		height: 100vh;
	}

	.personnel {
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
		background-color: #fff;
		margin-top: -30upx;
		padding: 0 20upx;
		display: flex;
		position: relative;

		.head_img {
			width: 100upx;
			height: 100upx;
			margin: -30upx 30upx 0 0upx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				border: 8upx solid #fff;
			}
		}

		.text {
			margin-top: 10upx;

			.name {
				font-weight: 900;

			}

			.num {
				font-size: 24upx;
				display: flex;
				color: rgb(250, 100, 0);
				margin-top: 5upx;

				text {
					margin-right: 20upx;
				}
			}
		}

		.attention {
			padding: 5upx 20upx;
			background: linear-gradient(to right, rgb(254, 189, 140), rgb(254, 28, 77));
			position: absolute;
			right: 20upx;
			top: 20upx;
			color: #fff;
			border-radius: 8upx;
			font-size: 24upx;
		}
	}

	.comment {
		background-color: #F4F5F7;

		.commentItem {
			// display: flex;
			margin: 40upx 0;
			padding: 20upx 40upx;
			// padding-bottom: 50upx;
			margin: 20upx 0;
			position: relative;
			background-color: #fff;
			border-bottom: 1upx solid rgb(247, 247, 247);

			.img_head {
				margin-right: 10upx;
				display: flex;

				image {
					width: 80upx;
					height: 80upx;
					border-radius: 50%;
					border: 4upx solid rgb(247, 247, 247);
					overflow: hidden;
				}

				.right {
					margin-left: -30upx;
				}
			}

			.text {


				.name {
					font-size: 24upx;
					font-weight: 900;
					flex: 1;

					.parent {
						color: rgb(50, 50, 50);
					}

					.child {
						color: #FA6400;
						margin-left: 20upx;
						padding-left: 15upx;
						border-left: 2upx solid #e7e7e7;
					}
				}

				.time {
					flex: 1;
					text-align: left;
					font-size: 22upx;
					color: #a7a7a7;
				}




				.u-content {
					line-height: 1.2 !important;
				}




			}

			.content_text {

				font-size: 28upx;
				font-weight: 900;
				color: #333333;
			}

			.video {
				width: 100%;
				height: 360upx;
				margin-bottom: 20upx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 12upx;
				}

				.play {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					opacity: .7;
				}
			}

			.img {
				display: flex;
				flex-wrap: wrap;
				width: 100%;

				.imgItem {
					flex: 0 0 32.5%;

					image {
						width: 100%;
						height: 200upx;
						border-radius: 12upx;
					}
				}

				.imgItem:nth-child(2) {
					margin: 0 1.25%;
				}

				.imgItem:nth-child(5) {
					margin: 0 1.25%;
				}

				.imgItem:nth-child(8) {
					margin: 0 1.25%;
				}

			}

			.esc {
				// position: absolute;
				// right: 20upx;
				// bottom: 10upx;
				margin-right: 10upx;
			}

			.like_item {
				width: 80upx;
				margin: 3upx 6upx;

				image {
					width: 60upx;
					height: 60upx;
					border-radius: 50%;
					margin: 0 auto;
					display: block;
				}

				view {
					font-size: 20upx;

					text-align: center;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}
	}

	.fabulous {
		width: 86upx;
		padding-bottom: 10upx;
		font-size: 24upx;
		display: flex;
		align-items: flex-end;
		flex-direction: row-reverse;
		color: rgb(153, 153, 153);
		position: absolute;
		right: 0;
		top: 30upx;
	}

	.praise-me {
		font-size: 30rpx;
		font-weight: bold;
		color: rgb(250, 100, 0);
		z-index: 2;
	}

	.animation-opacity {
		position: absolute;
		left: 40rpx;
		bottom: 10rpx;
		font-weight: bold;
		opacity: 0;
	}
</style> 
